dangler
-
Posts
36 -
Joined
-
Last visited
dangler's Achievements
Explorer (1/14)
0
Reputation
-
раз уж учиться, то можно еще вопрос? я вот тут прочитал: hidden Отображается только область внутри элемента, остальное будет обрезано. И как-то не понял совсем, как это связано с моим блоком.. а что "остальное будет обрезано"? И вообще: "Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров." То есть у меня не помещалось содержимое? Но я ведь не задавал фиксированной высоты и ширины, почему же оно не помещалось? Хм..
-
ух ты, спасибо большое! и правда, работает
-
то есть у тебя не такая картинка: ?? то есть, один блок снизу всегда один? я, если добавляю 1 блок div id="goods" до последнего div id="edge" у меня это блок встает в новой строке, то есть, получаются снизу 2 строки и в каждой только по 1 блоку слева. если добаляю еще, то начинает заполняться эта предпоследняя строка, в последней всегда остается один блок.. и при этом расстояние по вертикали между последней строкой и предпоследней в 2 раза меньше, чем остальные (см. рисунок)
-
http://spice.atahanov.ru/ вот, это последний вариант ) а в сообщении я процесс описал..
-
хм, не совсем понял.. у меня просто есть уже див centerLayer, он общий для всего, чтобы содержимое по центру выравнивалось.. ион работает нормально.. а не получается именно расположить блоки в несколько горизонтальных рядов.. или, если добавить в мой centerLayer свойство overflow: hidden; zoom:1;, то все заработает? или только в ИЕ6? хм, хм. я просто в мозиле проверяю..
-
Здравствуйте! У меня такая ситуация. Вот, нарисовал недавно дизайн сайта: Ну и, соответственно, нужно сверстать. Поскольку я дизайнер, то верстаю не слишком часто и до этого в основном, по старинке, верстал таблицами. Сейчас же решил, что это совсем уж прошлый век, поэтому сверстал все дивами и цсс. Вот такой код получился в первоначальном варианте: сам сайт: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Магазин спайса</title> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <link rel="stylesheet" type="text/css" href="spiceshop.css" /> </head> <body> <div id="centerLayer"> <div id="top"> <img src="top.jpg" height="119" width="672" alt="" title="" /> </div> <div id="but"> <a href="page1.html"><img src="but1.jpg" alt="" title="" /></a> </div> <div id="but"> <a href="page2.html"><img src="but2.jpg" alt="" title="" /></a> </div> <div id="but"> <a href="page3.html"><img src="but3.jpg" alt="" title="" /></a> </div> <div id="but"> <a href="page4.html"><img src="but4.jpg" alt="" title="" /></a> </div> <div> <a href="page5.html"><img src="but5.jpg" alt="" title="" /></a> </div> <div id="topline"> </div> <div id="shopback"> <div id="shopframe"> <div id="goods"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div id="goods"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div id="goods"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> <div id="goods"> 2<br>text<br>text2<br>text </div> </div> </div> </div> </body> </html> и цсс: body { background: url(sersv16_gr.jpg); margin: 0; padding: 0;} #centerLayer { width: 672px; /* Ширина слоя в пикселах */ height: 100%; margin: 0 auto; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ } img { margin: 0; padding: 0; border: 0;} #top { width: 100%; /* Ширина слоя в пикселах */ height: 119px; margin: 0; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */} #topline { width: 100%; height: 8px; margin: 0; /* Отступ слева и справа */ background: url(topback.gif); /* Цвет фона */ padding: 0; /* Поля вокруг текста */} #but { float:left; margin: 0; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ } #shopback { height: 100%; background: #c8d6b5; /* Цвет фона */ padding: 7px; /* Поля вокруг текста */ } #shopframe { border: 1px solid #406a20; height: 100%; background: #c8d6b5; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ } #goods { float:left; width: 130px; border: 1px solid #a7ba8e; height: 170px; background: #dce4d2; /* Цвет фона */ padding: 6px; /* Поля вокруг текста */ margin: 16px 0 16px 16px; } но результат получился не совсем таким, как я ожидал: то блок с фоном закрылся раньше, чем началось содержимое, хотя в коде он закрывается позже. я решил, что это из-за значения свойства float: left. я добавил в конце каждого ряда блок со значением clear: хтмл: <div id="edge"> 2<br>text<br>text2<br>text </div> цсс: #edge { clear:left; width: 130px; border: 1px solid #a7ba8e; height: 170px; background: #dce4d2; /* Цвет фона */ padding: 6px; /* Поля вокруг текста */ margin: 16px 0 16px 16px; } стало получше, но все равно неправильно: то есть после каждого clear строчка пропускается, а, если в конце нет блока с clear, тогда остальные уходят за фон.. тогда я сделал все блоки просто #goods и в конце добавил блок #edge (у которого clear:left). получилось довольно близко к тому, что нужно, но все равно не то...: В связи с этим, у меня общий вопрос: как же сделать так, чтобы блоки располагались, как в дизайне? Ну и, более частные: почему после clear:left происходит перенос на новую строку, но без него фоновый блок закрывается раньше времени? И второй - почему расстояние между блоками по вертикали отличается и как-то не всегда совпадает с горизонтальным, хотя у всех блоков одинаково margin: 16px 0 16px 16px ? Очень длинный получился вопрос.. ) Но я надеюсь, что тема интересна не только мне, поэтому был бы очень признателен знатокам за ответы!
-
блин, да я бы рад, но это ведь переверстывать все страницы.. заново нарезать все, да и я верстал всегда в таблицах, с блоками тольком не умею.. а тут вот не рассчитал что-то.. а в такой ситуации, как сейчас, можно еще как-то справиться? да, кстати, у меня вся таблица с картинками заключена в див #centerLayer { width: 828px; margin: 0 auto; background: #ffffff; padding: 0; text-align: center; } чтобы по центру все было... может, как-нибудь к этому диву привязать еще один, чтобы в нем уже всю информацию писать, но чтобы он не был связан таблицей.. или еще, может, как нибудь можно?
-
здравствуйте! у меня вот такая ситуация - дизайн сверстан жестко в таблице, слева и сверху - картинки, а справа снизу пустое пространство для контента. (см. рисунок). если текста немного, то его можно втавить в эту ячейку. но, если он по высоте превышает левое меню, то ячейка растягивается и "разламывает" весь дизайн.. поэтому, я хотел бы расположить слой поверх этой таблицы на этом пустом месте, чтобы этот блок тянулся вниз вне зависимости от количества текста. то есть "привязать" его верхний угол к краю этой пустой ячейки, но чтобы он не зависил от размера этой ячейки, а шел поверх нее.. подскажите, пожалуйста, можно это это сделать как-нибудь?
-
у меня такая ситуация - сверстал снала главную страницу, сверху рисунок, сбоку меню - по центру - красивые графические кнопки. все сверстано целиком в таблице, с жескими размерами. чтобы было по центру, всю таблицу целиком заключил в див: #centerLayer { width: 828px; /* Ширина слоя в пикселах */ margin: 0 auto; /* Отступ слева и справа */ background: #ffffff; /* Цвет фона */ padding: 0; /* Поля вокруг текста */ text-align: center; /* Выравнивание содержимого слоя по левому краю */ } сейчас стал делать другие страницы, на них верх и левая часть остается точно такой же, а в центре вместо кнопок - текстовое наполнение. я взял за основу код главной страницы, удалил все кнопочки оттуда и превратил все в одну ячейку: <td class="content" colspan="4" rowspan="11"> чтобы это ячейка не "разломала" всю верстку, я задал ей жесткие размеры: .content { vertical-align: top; text-align: left; width: 600px; height: 379px; } После этого вписал туда текст и вне понадобилось задать ему отступы и поля. Однако, добаление к классу content марджина и паддинга ничего не дало. Тогда я сделал див внутри этой ячейки с классом: .text { margin: 20; padding: 40; font-size: 12px; font-family: Tahoma, Verdana, Arial, sans-serif; text-align: left; color: #444444; width: 80%; vertical-align: top; } цвет текста, гарнитура, размер меняются, как и задано, однако свойства margin и padding не работают абсолютно... при этом, для всего документа, в силу верстки таюлицами задано в цсс: table { border-collapse: collapse; margin: 0; padding: 0; spacing: 0; } td { padding: 0; border 0; } но это ведь в общем для документа, а тут я отдельным классом хочу все-таки иметь отступы, однако они не работают.. подскажите, пожалуйста, сталкивался ли кто-нибудь с этим? есть какое-нибудь решение?
-
ага, спасибо, сейчас попробую!
-
хм, сейчас залил на хостинг и получается так, что при первом просмотре при наведении на картинку на ее месте появляется пустое место и лишь через некоторое время загружается картинка.. а ведь многие первый раз будут заходить, а это очень уж некрасиво смотрится.. подскажите, пожалуйста, можно ли это как-то решить?
-
то есть через цсс стиль ссылки задавать, да? а раньше вроде (лет 8 назад) я как-то это без цсс делал, правда, уже и не вспомню как только вот у меня в меню много пунктов, а текст на них - в картинке, так что для каждого пункта свой стиль ссылки.. ) но по-другому особо никак и не сделаешь, я думаю правда в ИЕ при наведении притормаживает на доли скунды перед сменой картинки, если бытро по пуктам водить. но, главное, что работает спасибо, сделал вот так: a.main1 { background: url(images/main_slice_21.jpg); display: block; width: 233px; height: 142px; } a.main1:hover { background: url(images/main_slice_on_21.jpg); } и так 12 пунктов, у всех разные картинки
-
Justnewone, спасибо! я думал просто, что если для table указал, то в ячейках тоже исчезнет паддинг, ан нет ) но теперь все работает ) Searcher, ну да, это я указал вроде (см выше) Nekromancer, да согласен, наверное, читал тут на сайте про различия верстки таблицами и слоями и, как я понимаю, слоями современне и чем-то лучше.. но таблицами хоть привык, все понятно в них, а сроки горят как всегда, нужно было сверстать за сутки буквально.. почитал немного и понял, что за такой котроткий срок не успею научиться слоями верстать.. а вообще, надо будет, наверное, освоить )
-
решил сверстать страницу полностью по правилам. написал сверху <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> все теги в документе закрываются, даже незакрывающиеся, все стили решил прописать в цсс: body { background: #ffffff; margin: 0; padding: 0; } table { border-collapse: collapse; margin: 0; padding: 0; spacing: 0; } #centerLayer { width: 829px; margin: 0 auto; background: #ffffff; padding: 0; text-align: center; } всю страницу сверстал жестко в таблице, а таблицу всю ставил в центральный див: <body> <div id="centerLayer"> <table id="Table_01" border="0" cellpadding="0" cellspacing="0"> <tr> <td colspan="9" rowspan="3"> <img src="images/main_01.jpg" width="228" height="102" alt=""></td> <td colspan="8"> <img src="images/main_02.jpg" width="600" height="42" alt=""></td> ........ <td> <img src="images/spacer.gif" width="75" height="1" alt=""></td> <td></td> </tr> </table> </div> </body> </html> только вот в таблице все равно получается заданы отсупы и границы прям в коде хтмл: border="0" cellpadding="0" cellspacing="0" а если это убрать и открыть таблицу прото тегом <table>, то все картинки "разъезжаются" - толи паддинг, толи спейсинг, уж не знаю появляется. хотя вроде в цсс все обнулил - и граница колапс и отступы..спочему так, можете подсказать? хотелось просто чтбы прям по всем правилам все сделано было.. )
-
собственно, вопрос в теме ) подскажите, пожалуйста, какой код написать в html, чтобы при наведении мыши изображение менялось на другое?